<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhengzx
 * @Date: 2021-12-11 12:54:08
 * @LastEditors: 郑灶欣
 * @LastEditTime: 2021-12-17 15:53:31
-->
<template>
  <div>
    <astronaut></astronaut>
    <div class="login-bg">
      <div class="login-title">登录</div>
      <a-form :model="form" @submit="handelLogin">
        <a-form-item field="name" label="用户名" :rules="loginRule.name">
          <a-input v-model="form.name" size='large' placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item field="post" label="密码" :rules="loginRule.post">
          <a-input v-model="form.post" size='large' placeholder="请输入密码" type='password' />
        </a-form-item>
        <a-form-item field="code" label="验证码" :rules="loginRule.code">
          <a-input v-model="form.code" size='large' placeholder="请输入验证码" />
        </a-form-item>
        <a-button class="login-btn" type='primary' html-type="submit">登录</a-button>
      </a-form>
    </div>
  </div>
</template>

<script>
  //引入外星人组件
  import astronaut from "@/components/astronaut/index.vue";
  //登录表单检验规则
  var loginRule = {
    name: [{ required: true, message: '请输入用户名' }],
    post: [{ required: true, message: '请输入密码' }],
    code: [{ required: true, message: '请输入验证码' }]
  }
  export default {
    components: { astronaut },
    data() {
      return {
        loginRule,
        form: {
          name: '',
          post: '',
          code: ''
        }
      };
    },
    methods: {
      /* 登录 */
      handelLogin({ values, errors }) {
        if (errors) {
          console.log('values:', values, '\nerrors:', errors)
          return
        }
     
        this.$store
          .dispatch("user/login", this.form)
          .then((res) => {
            this.$router.push({
              path: '/',
            });
          })
          .catch(() => { });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .login {
    z-index: 9;
    color: #333;

    &-bg {
      width: 400px;
      position: fixed;
      right: 80px;
      top: 30vh;
      background: #fff;
      padding: 20px;
      box-shadow: 0px 5px 20px #e5e5e5;
      border-radius: 5px;
      height: auto;
    }

    &-title {
      text-align: center;
      margin-bottom: 40px;
      font-size: 20px;
    }

    &-btn {
      width: 230px;
      height: 40px;
      margin: 30px auto;
    }
  }
</style>